<template>
  <div class="big-data-container allDiv">
    <div class="topDiv">
      <div class="leftBox">
        <div style="display: flex">
          健康安全滑雪：
          <vue-seamless-scroll :data="textList" class="seamless-warp" :class-option="defaultOption">
            <ul class="item">
              <li style="margin-right:20px;">{{ textList }}</li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="topBox">富龙四季小镇国际度假区</div>
      <div class="rightBox">
        <div style="display: flex">
          政府发布的信息：
          <vue-seamless-scroll :data="textList" class="seamless-warp" :class-option="defaultOption2">
            <ul class="item">
              <li style="margin-right:20px;">{{ textLists }}</li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <div class="resortData">
      <div class="Ldiv">
        <Ldiv :rowData="rowData"></Ldiv>
      </div>
      <div class="Cdiv">
        <Cdiv></Cdiv>
      </div>
      <div class="Rdiv">
        <Rdiv :rowData="rowData"></Rdiv>
      </div>
    </div>
  </div>
</template>
<script>
import Ldiv from "./components/Ldiv.vue";
import Cdiv from "./components/Cdiv.vue";
import Rdiv from "./components/Rdiv.vue";
import methods from '../../../components/basic/ViewGridConfig/methods';
export default {
  components: { Rdiv, Cdiv, Ldiv },
  data() {
    return {
      textList:'健康安全滑雪',
      textLists:'政府发布的信息',
      rowData:new Object(),
      activeData:[],
      defaultOption:{
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
      defaultOption2:{
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum:1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      },
    };
  },
  mounted() {
  this.getData()
},
methods:{
  getData() {
      let parmas = { order: "desc", page: 1, rows: 30, sort: "id", wheres: [] };
      this.http
        .post("api/Kuaibao_large_screen_data/getPageData", parmas)
        .then((res) => {
          console.log(res.rows);
          if (res.rows.length != 0) {
            this.rowData = res.rows[0];
            this.textList = this.rowData.healthy_and_safe_skiing
            this.textLists = this.rowData.government_info
          } 
        });
    },
}
};

</script>

<style scoped lang="less">
.allDiv {
  position: absolute;
  overflow: hidden;
  background-color: #1400a8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  .topDiv {
    height:50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    color: #fff;
    .topBox {
      width: 50%;
      height: 100%;
      font-size: 30px;
      font-weight: 600;
      text-align: center;
      margin:0 10px;
    }
    .leftBox {
      width: 25%;
      height: 100%;
      padding-left:10px ;
      .seamless-warp {
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        width: calc(100% - 141px);
      }
    }
    .rightBox {
      width: 25%;
      height: 100%;
      .seamless-warp {
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        width: calc(100% - 141px);
      }
    }
  }
}
.resortData {
  overflow: hidden;
  background-color: #1400a8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
  width: 100%;
  height: calc(100vh - 50px);
  display: flex;
  .Ldiv {
    width: 30%;
  }
  .Cdiv {
    flex: 1;
    width: 39%;
    margin: 0 5px;
    padding-top: 0 !important;
  }
  .Rdiv {
    width: 30%;
  }
  > div {
    border-top: none;
    border-bottom: none;
    font-size: 14px;
    padding:0 10px;
  }
}
</style>
<style>
.data-foot-line {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.data-foot-line:before,
.data-foot-line:after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  border-bottom: 2px solid #02a6b5;
  bottom: 0;
}

.data-foot-line:before {
  border-left: 2px solid #02a6b5;
  left: 0;
}

.data-foot-line:after {
  border-right: 2px solid #02a6b5;
  right: 0;
}
.data-item:before {
  border-left: 2px solid #02a6b5;
  left: 0;
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}

.data-item:after {
  border-right: 2px solid #02a6b5;
  right: 0;
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
  border-top: 2px solid #02a6b5;
  top: 0;
}
</style>